<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container { width: 1000px; height: 600px; margin: 30px auto; }
    </style>
</head>
<body>
<input id="text" type="text" />
<button onclick="send()">发送消息</button>
<button onclick="closeWebSocket()">关闭连接</button>
<div id="message">
</div>
</body>
<div id="chart-container"></div>
<script type="text/javascript">
    var websocket = null;
    var clientId = Math.random().toString(36).substr(2);
    let studentData = []
    const chartDom = document.getElementById('chart-container');
    const myChart = echarts.init(chartDom);
    function  initData(studentData) {
        const names = studentData.map(item => item.name);
        const chineseScores = studentData.map(item => item.scoreChinese);
        const englishScores = studentData.map(item => item.scoreEnglish);
        const mathScores = studentData.map(item => item.scoreMath);
        console.log(chineseScores, englishScores, mathScores);
        const option = {
            title: {
                text: '一年级一班学生成绩对比',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: ['语文', '英语', '数学'],
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: names,
                axisLabel: {
                    rotate: 30,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                min: 50,
                max: 100,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name: '语文',
                    type: 'bar',
                    data: chineseScores,
                    itemStyle: { color: '#c23531' },
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                {
                    name: '英语',
                    type: 'bar',
                    data: englishScores,
                    itemStyle: { color: '#2f4554' },
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                {
                    name: '数学',
                    type: 'bar',
                    data: mathScores,
                    itemStyle: { color: '#61a0a8' },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ],
            // dataZoom: [
            //     {
            //         type: 'slider',
            //         show: true,
            //         xAxisIndex: [0],
            //         start: 0,
            //         end: 50
            //     }
            // ]
        };
        myChart.setOption(option);
    }
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8090/ws/"+clientId);
    }
    else{
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function(){
        setMessageInnerHTML("连接成功");
    }
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        let obj = JSON.parse(event.data);
        console.log(obj,'obj')
        // 初始化图表
        initData(obj.data)
    }
    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }
</script>
</html>